<template>
  <div class="main">
    <el-input
      v-model="keyWord"
      placeholder="请输入货物ID"
      style="width:300px"
    ></el-input>
    &nbsp;
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="search"
    >搜索</el-button>
    <el-button
      type="primary"
      icon="el-icon-plus"
      circle
      @click="dialogFormVisible = true"
      style="float:right"
    ></el-button>

    <!-- 表单 -->
    <el-table
      :data="filterData"
      stripe
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="goodId"
        label="货物ID"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderId"
        label="订单ID"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="goodName"
        label="货物名"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="货物价格(元)"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="InspectionAddress"
        label="质监局"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="pass"
        label="合格与否"
        align="center"
      >
        <template slot-scope="scope">
          <span><i
              class="el-icon-circle-check"
              v-if="scope.row.pass === 1"
              style="color:#67C23A;font-size:26px"
            ></i>
          </span>
          <span><i
              class="el-icon-circle-close"
              v-if="scope.row.pass === 0"
              style="color:#F56C6C;font-size:26px"
            ></i>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="send"
        label="发货"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-s-promotion"
            v-if="scope.row.pass === 1"
            circle
            size="small"
            @click="open"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-s-promotion"
            v-if="scope.row.pass === 0"
            disabled
            circle
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      title="送审"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item
          label="货物ID"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.goodId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="订单编号"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="form.orderId"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="质监局地址"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="form.inspectionAddress"
            placeholder="请选择活动区域"
          >
            <el-option
              label="区域一"
              value="shanghai"
            ></el-option>
            <el-option
              label="区域二"
              value="beijing"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = false"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "Inspection",
  data() {
    return {
      gridData: [
        {
          goodId: "121",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 0,
        },
        {
          goodId: "122",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 1,
        },
        {
          goodId: "123",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 1,
        },
      ],
      filterData: [
        {
          goodId: "121",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 0,
        },
        {
          goodId: "122",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 1,
        },
        {
          goodId: "123",
          orderId: "12121",
          InspectionAddress: "0x213121221",
          pass: 1,
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      keyWord: "",
    };
  },
  methods: {
    search() {
      this.filterData = this.gridData.filter((g) => {
        return g.goodId.indexOf(this.keyWord.trim()) != -1;
      });
      console.log(this.filterData);
    },
    open() {
        const h = this.$createElement;
        this.$msgbox({
          type:'success',
          title: '确认发货',
          message: h('p', null, [
            h('span', null, '是否确认发货'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'success',
            message: '发货成功',
          });
        });
      }
  },
};
</script>

<style lang='less'>
</style>